<script setup lang="ts">
import {
  ElButton,
  ElDrawer,
  ElRadioGroup,
  ElRadio,
  ElSlider,
} from "element-plus";
import { Setting, Check, Close } from "@element-plus/icons-vue";
// import { Picture as IconPicture } from "@element-plus/icons-vue";
import { reactive, ref, watch } from "vue-demi";

let bl = reactive({
  start: false,
  exit: false,
  // 首页20分钟刷新
  silent: false,
  // 开机启动
  bootUp:false
});

// 按钮通用功能
let utils = async (val: any, valStr: string) => {
  watch(
    () => val[valStr],
    (newValue, oldValue) => {
      if (typeof oldValue !== "undefined") {
        setTimeout(async () => {
          (window as any).config.setConfig(valStr, newValue);
        }, 0);
      }
    }
  );
};

// 获取config

async function getValue(key: any) {
  let data = await (window as any).config.getConfig(key);
  return data;
}

// 初始化 按钮
setTimeout(async () => {
  bl.start = await getValue("start");
  bl.exit = await getValue("exit");
 
  bl.silent = window.localStorage.getItem('silent') === 'true' ? true : false;
  bl.bootUp = await getValue("bootUp") === true ? true : false;
}, 0);

// 软件开机启动
utils(bl, "bootUp");

// 软件最小化启动
utils(bl, "start");

// 软件关闭方式
utils(bl, "exit");


// 软件设置
const drawer = ref(false);

// 首页信息流刷新是否为 20分钟刷新

watch(
  () => bl.silent,
  (newValue, oldValue) => {
    window.localStorage.setItem("silent", `${newValue}`);
  }
);
</script>

<template>
  <el-button
    type="primary"
    style="margin-left: 16px"
    @click="drawer = true"
    class="openSettingBtn"
    :icon="Setting"
  >
  </el-button>

  <el-drawer
    v-model="drawer"
    title="I am the title"
    :with-header="false"
    size="90%"
  >
    <el-button
      type="danger"
      class="closeSettingBtn"
      @click="drawer = false"
      plain
      :icon="Close"
    ></el-button>

    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">软件设置</h4>
      <el-button type="danger" @click="close">
        <el-icon class="el-icon--left"></el-icon>
        关闭
      </el-button>
    </template>
    <div class="item">
      <div class="itemText">软件开机启动</div>
      <div>
        <el-switch
          v-model="bl.bootUp"
          class="mt-2"
          inline-prompt
          :active-icon="Check"
          :inactive-icon="Close"
        />
      </div>
    </div>
    <div class="item">
      <div class="itemText">软件最小化启动</div>
      <div>
        <el-switch
          v-model="bl.start"
          class="mt-2"
          inline-prompt
          :active-icon="Check"
          :inactive-icon="Close"
        />
      </div>
    </div>

    <div class="item">
      <div class="itemText">软件关闭方式</div>

      <el-radio-group v-model="bl.exit" size="small">
        <el-radio :label="true" border>直接退出</el-radio>
        <el-radio :label="false" border>最小化到托盘</el-radio>
        <el-radio :label="undefined" :disabled="true" border>未选择</el-radio>
      </el-radio-group>
    </div>

    <div class="item">
      <div class="itemText">首页信息流刷新是否为20分钟刷新(重启软件生效)</div>
      <div>
        <el-switch
          v-model="bl.silent"
          inline-prompt
          :active-icon="Check"
          :inactive-icon="Close"
        />
      </div>
    </div>
  </el-drawer>
</template>

<style scoped lang="less">
// 打开设置按钮
.openSettingBtn {
  position: fixed;
  // background-color: red;
  right: 20px;
  // float: left;
  z-index: 1;
}

// 关闭设置按钮
.closeSettingBtn {
  position: absolute;
  right: 20px;
  top: 0;
}

.item {
  margin-bottom: 20px;
  .itemText {
    margin-bottom: 10px;
  }
}
</style>
